<!--
 * @Description: headerPage  -- 咨询公共头部封装
 * @Author: your name
 * @Date: 2024-03-05
 * @LastEditTime: 2024-03-05
 * @LastEditors: Please set LastEditors
-->

<template>
  <div>
    <div class="headerPage">
      <header>
        <div class="wrapper heart_w">
          <div class="logos">
            <router-link to="/">
              <img
                src="https://www.rongyuejiaoyu.com/static/index/images/logo.png"
                alt=""
              />
            </router-link>
          </div>
          <div class="header_nav">
            <div class="nava">
              <a href="#">题库</a>
            </div>
            <div class="nava">
              <a href="#">资料</a>
            </div>
            <div class="nava">
              <a href="#">课程</a>
            </div>
            <div class="nava" v-for="item in 3" :key="item">
              <router-link to="combos"> 图书 </router-link>
            </div>
            <div class="nava">
              <router-link to="/question" target="_blank"> 答疑 </router-link>
            </div>
          </div>
          <el-link href="#" target="_blank"> 基础测评 </el-link>
          <div class="right_area">
            <div class="search_bg">
              <el-input
                v-model="input"
                suffix-icon="el-icon-search"
                placeholder="请输入内容"
              ></el-input>
            </div>
            <div class="reg_login">1</div>
          </div>
        </div>
      </header>
    </div>

    <!-- 二级路由 -->
    <router-view></router-view>

    <Footer></Footer>
  </div>
</template>

<script>
import Footer from '@/views/Layout/commons/Footer.vue'
export default {
  name: 'headerPage',
  components: {
    Footer
  },
  data() {
    return {
      input: ''
    }
  },
  created() {
    console.log(this.$route.path)
  },
  methods: {}
}
</script>

<style scoped lang="scss">
header {
  background-color: #fff;
}

.search_bg {
  ::v-deep {
    .el-input__inner {
      height: 32px;
      line-height: 32px;
      border: 1px solid #999;
    }
    .el-input__icon {
      line-height: 32px;
      font-size: 16px;
    }
  }
}

.wrapper {
  background-color: #fff;
  display: flex;
  align-items: center;
  height: 60px;
  line-height: 60px;

  .right_area {
    display: flex;
    align-items: center;
    margin-left: 30px;
    line-height: 30px;
    width: 345px;
    justify-content: space-between;
  }

  .el-link {
    margin-left: 30px;
    width: 100px;
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    text-align: center;
    background-color: #bd0000;
    display: inline-block;
    border-radius: 15px;
    color: #fff;

    &.is-underline:hover:after {
      width: 70px;
      position: absolute;
      left: 0;
      right: 0;
      margin: 0 auto;
      text-align: center;
      height: 0px;
      bottom: 4px;
      border-bottom: 1.5px solid #fff;
    }
  }

  .header_nav {
    display: flex;
    align-items: center;
    width: 500px;
    justify-content: space-between;
    margin-left: 40px;
  }

  .logos {
    img {
      max-width: 100%;
      border: 0;
      vertical-align: middle;
    }
  }
}
</style>
